<template>
  <div class="bg">
    <nav-com title="申请退货退款" :showView='showView' @back="backHandler()"></nav-com>
    <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
      <div v-if="data.logs != null" v-for="(item,index) in data.logs" :key="index" >
        <div style="display:flex;padding-left: 10px">
          {{item.reason}}
        </div>
        <v-html  style="display:flex;padding-left: 10px;color: #808080;font-size: 13px;line-height: 15px;">
          {{item.content}}
        </v-html>
        <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px;color: #808080;font-size: 15px;line-height: 30px;">
          {{item.createtime | formatDateTime}}
        </div>
      </div>

    </div>
    <!-- <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
        <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
            卖家留言
        </div>
        <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px;color: #808080;font-size: 10px;line-height: 30px;">
            您好，请帮忙把产品寄回一下地址
            收件人：郝女士
            收件地址：广东省深圳市龙华区255号
        </div>
    </div> -->

    <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
      <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px;color: #808080;font-size: 12px;line-height: 30px;">
        售后编号：{{data.aftersale_sn}}
      </div>
      <div style="border-bottom: 1px solid #DCDCDC;padding: 10px;display: flex;">
        <div style="width:83px;height:83px">
          <img  style="width:83px;height:83px" :src="data.goods_image" alt="">
        </div>
        <div style="padding-left: 10px;">
          <div style="color:#000000;font-size:15px;line-height: 30px;">{{data.goods_title}}</div>
          <div style="font-size:10px;line-height: 20px;">数量：{{data.goods_num}}</div>
          <div style="color:#FE4B20;font-size:18px;font-weight: bold;">￥{{data.goods_price}}</div>
        </div>
      </div>
      <div style="display:flex;padding-left: 10px;color: #808080;font-size: 12px;line-height: 25px;">
        申请时间：{{data.createtime | formatDateTime}}
      </div>
      <div style="display:flex;padding-left: 10px;color: #808080;font-size: 12px;line-height: 25px;">
        退款金额：￥{{data.refund_fee}}
      </div>
      <!-- <div style="display:flex;padding-left: 10px;color: #808080;font-size: 12px;line-height: 25px;">
          补充说明：
      </div> -->
    </div>
    <div v-for="item in data.btns" v-if="item=='cancel'" @click="cancelSubmit" style="color: #FFFFFF;margin:0 auto;text-align: center;width: 300px;line-height: 50px;background: #FE4B20;border-radius: 50px;margin-top: 50px;">取消售后</div>

  </div>

</template>
<script>
import { getOrders,getOrders2,putOrders,putselfWithdrawal,orderConfirm,orderAfterDetail,orderAfterCancel} from '@/api/api'
import navCom from '@/component/nav'
import { Field } from 'vant';
import { Uploader } from 'vant';
import { Dialog } from 'vant';

export default {
  name:'orders',
  components:{
    navCom
  },
  data() {
    return {
      show:true,
      id:"",
      fileList: [],
      data:{}
    }
  },
  filters: {
    /*
          时间格式自定义 只需把字符串里面的改成自己所需的格式
          */
    formatDateTime:function(date) {
      var date = new Date(date*1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate = date.getFullYear() + "-" + month + "-" + strDate
          + " " + Hours + ":" + Minutes + ":" + Seconds;
      return currentDate;
    }

  },

  mounted(){
    console.log( this.$route.params.id);
    this.getDataHanlder();
  },
  methods:{
    //返回
    backHandler(){
      this.$router.go(-1)
    },

    //初始化
    init(){
      this.getDataHanlder("range")
    },
    cancelSubmit(){
      let data = {
        id:this.$route.params.id
      }
      orderAfterCancel(data).then(res=>{
        console.log("orderAfterCancel",res);
        if(res.data.code==1){
          this.$dialog.alert({
            message:res.data.msg
          }).then(()=>{
            this.$router.back()
          })
        }else {
          this.$dialog.alert({
            message:res.data.msg
          })
        }
      })
    },
    //获取数据
    getDataHanlder(){
      let data = {
        id:this.$route.params.id
      }
      orderAfterDetail(data).then(res=>{
        console.log("orderAfterDetail",res);
        if(res.data.code==1){
          this.data = res.data.data
        }else {
          this.$dialog.alert({
            message:res.data.msg
          })
        }
      })
    },
  }
}
</script>
<style scoped>
.bg{
  height: 100vh;
  background-color: #f2f3f7;
}
.van-cell-group {
  background-color:#f7f7f7;
}
.van-cell {
  font-size: 10px!important;
  background-color:#f7f7f7;
  border: 0 solid #f7f7f7;

}
.van-cell ::after {
  border: 0 solid #f7f7f7;
}
.van-uploader__upload-text {
  /* margin-top: 8px; */
  color: #969799;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
<style>
.van-uploader__upload {
  border: 1px solid #E0E0E0!important;
}
.van-uploader__upload-text {
  margin-top: 0px!important;
}
</style>
